import React from "react";
import { Select, Input, DatePicker, Radio,Button } from 'antd'
import {Link} from 'react-router-dom'
import './NewDiscountCoupon.css'
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
export default class NewDiscountCoupon extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
      value1: 1,
      value2: 1,
    };
  }
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  onChange1 = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value1: e.target.value,
    });
  };
  onChange2 = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value2: e.target.value,
    });
  };
  render() {
    let { size } = this.state;
    return (
      <div>
        <h2>基本信息</h2>
        <div className={'choseQuan'}>
          <span>优惠券类型</span>
          <Select defaultValue="商品券" className={'Select'} onChange={this.handleChange}>
            <Option value="商品券">商品券</Option>
            <Option value="新人券">新人券</Option>
            <Option value="满减券">满减券</Option>
            <Option value="客户券">客户券</Option>
          </Select>
        </div>
        <div className={'choseName'}>
          <span>优惠券名称</span>
          <Input placeholder="请输入优惠券名称" />
        </div>
        <div className={'choseSend'}>
          <span>发放时间</span>
          <RangePicker size={size} />
        </div>
        <div className={'choseMethod'}>
          <span>发放方式</span>
          <div>
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio value={1}>直接发放（直接将优惠券发送给所有用户）</Radio>
              <Radio value={2}>活动发放（通过大转盘等活动发放）</Radio>
            </Radio.Group>
          </div>
        </div>
        <h2>规则内容</h2>
        <div className={'rulesInput'}>
          <span>每人限领</span>
          <Input placeholder="请输入优惠券最多限领张数" />
          <div>
            <span>张</span>
          </div>
        </div>
        <div className={'rulesInput'}>
          <span>单张面额</span>
          <Input placeholder="请输入优惠券单张最大面额" />
          <div>
            <span>元</span>
          </div>
        </div>
        <div className={'validity'}>
          <span>有效期</span>
          <div>
            <Radio.Group onChange={this.onChange1} value={this.state.value1}>
              <div className={'validityChose'}>
                <Radio value={1}></Radio>
                <span>领券当天起</span>
                <Input />
                <span>天内有效</span>
              </div>
              <div className={'validityChose1'}>
                <Radio value={2}></Radio>
                <span>指定有效期</span>
                <div>
                  <RangePicker size={size} />
                </div>
                
              </div>
            </Radio.Group>
          </div>
        </div>
        <div className={'useDoor'}>
          <span>使用门槛</span>
          <div>
            <span>单笔订单满</span>
            <Input />
            <span>元可使用</span>
          </div>
        </div>
        <div className={'usePro'}>
          <span>适用商品</span>
          <div>
            <Radio.Group onChange={this.onChange2} value={this.state.value2}>
            <Radio value={1}>所有商品</Radio>
            <Radio value={2}>指定商品</Radio>
          </Radio.Group>
          </div>
        </div>
        <div className={'speak'}>
          <span>使用说明</span>
          <TextArea rows={4} />
        </div>
        <div className={'final'}>
        <Button className={'button'} style={{ backgroundColor: 'white', border: '1px solid #D3D3D3', color: 'black' }} type="primary">取消</Button>
        <Link to="/homepage/discountcoupon">
          <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">保存</Button>
        </Link>
        </div>
      </div>
    );
  }
}

